<template>
    <div class="login-page">
        <el-card class="login-box">
            <h1>广告管理系统</h1>
            <el-form ref="loginForm" :model="formData" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="formData.username">
                        <template #prefix>
                            <el-icon :size="20">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="formData.password" type="password" show-password>
                        <template #prefix>
                            <el-icon :size="20">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-button type="primary" class="login-btn" @click="submitForm">登录</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
    import {
        ref,
        reactive
    } from 'vue'
    import {
        ElMessage
    } from 'element-plus'
    import {
        User,
        Lock
    } from '@element-plus/icons-vue'
    import {
        useRouter
    } from 'vue-router'
    import {
        useAuthStore
    } from '../../store/index.js'

    const formData = reactive({
        username: '',
        password: ''
    })

    const rules = {
        username: [{
                required: true,
                message: '请输入用户名',
                trigger: ['blur']
            },
            {
                min: 1,
                max: 10,
                message: '长度1-10',
                trigger: ['change', 'blur']
            },
            {
                pattern: /^[a-zA-Z0-9]+$/,
                message: '只能包含字母和数字',
                trigger: ['change', 'blur']
            }
        ],
        password: [{
                required: true,
                message: '请输入密码',
                trigger: ['blur']
            },
            {
                min: 6,
                max: 20,
                message: '长度6-20',
                trigger: ['change', 'blur']
            },
            {
                pattern: /^[a-zA-Z0-9]+$/,
                message: '只能包含字母和数字',
                trigger: ['change', 'blur']
            }
        ]
    }

    const router = useRouter()
    const loginForm = ref(null)

    const submitForm = () => {
        loginForm.value.validate((valid) => {
            if (valid) {
                useAuthStore().login(formData).then(res => {
                    ElMessage.success("欢迎" + formData.username + '登陆成功')
                    router.push('/')
                    console.log(res)
                }).catch(error => {
                    ElMessage.error('登录失败: ' + error.message)
                })
            } else {
                console.log("表单验证失败")
                return false
            }
        })
    }
</script>

<style scoped>
    .login-page {
        width: 100vw;
        height: 100vh;
        background-color: #ffffee;
        display: flex;
    }

    .login-box {
        width: 400px;
        margin: auto;
        background-color: #ffffed;
        border: 2px solid #ffffea;
        border-radius: 2%;
        padding: 10px;
    }

    .login-box h1 {
        text-align: center;
        margin: 10px;
        margin-bottom: 40px;
    }

    .login-btn {
        width: 100%;
        background-color: #ffdcba;
    }
</style>